<template>
  <ul class="tab-ul">
    <li @click="toPrev">
      <a-button icon="left" :disabled="disabled1" />
    </li>
    <li class="activemenu" id="activeMenuList">
      <div class="active-menu-animated">
        <div
          :class="['tab-li', item.path == $route.path ? 'success-box' : '']"
          v-for="item in cachedViews"
          :key="item.path"
        >
          <span @click="onGo(item.path)" class="name">{{
            item.ResourceName
          }}</span>
          <span
            v-show="item.path != '/home'"
            class="close"
            @click="onEdit(item.path)"
            ><a-icon type="close"
          /></span>
        </div>
      </div>
    </li>
    <li @click="toNext"><a-button icon="right" :disabled="disabled2" /></li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      key: 1, //刷新key值
      disabled1: true,
      disabled2: true,
      show: true,
      cWidth: 0,
    };
  },
  computed: {
    cachedViews() {
      return JSON.parse(window.sessionStorage.getItem("tabBlockList"));
    },
  },
  methods: {
    //关闭Tab 找到相对应的项去删除
    onEdit(path) {
      let list = JSON.parse(window.sessionStorage.getItem("tabBlockList"));
      let cancheList = JSON.parse(
        window.sessionStorage.getItem("tabCacheList")
      );
      let idx = list.findIndex((item) => {
        return item.path == path;
      });
      this.$router.push(list[idx - 1].path);
      list.splice(idx, 1);
      cancheList.splice(idx, 1);
      window.sessionStorage.setItem("tabBlockList", JSON.stringify(list));
      this.resetSetItem("tabCacheList", JSON.stringify(cancheList));
      this.$emit("upTab");
      this.searchRight();
    },
    /* 左箭头 */
    toPrev() {
      this.disabled2 = false; //右箭头禁用解开
      let ele = document.getElementsByClassName("active-menu-animated")[0];
      //由于获取到的left是带有单位的，不能直接运算，所以要想办法得到数值再组合单位进行赋值
      //使用三目运算符的目的是最开始的时候得到元素的left是undefined，可是不能直接进行运算的哟
      ele.style.left = ele.style.left.split("p")[0]
        ? Number(ele.style.left.split("p")[0]) + 180 + "px"
        : "180px";
      //判断平移位置，左箭头禁用
      if (ele.style.left.split("p")[0] == 0) {
        this.disabled1 = true;
      }
    },

    /* 右箭头 */
    toNext() {
      this.disabled1 = false; //左箭头禁用解开
      let ele = document.getElementsByClassName("active-menu-animated")[0];
      //解释同上
      ele.style.left = ele.style.left.split("p")[0]
        ? ele.style.left.split("p")[0] - 180 + "px"
        : "-180px";
      //判断平移位置，右箭头禁用
      let num = ele.clientWidth - -180;
      if (Math.abs(ele.style.left.split("p")[0]) + num > ele.clientWidth) {
        this.disabled2 = true;
      }
    },
    //跳转到相对应页面
    onGo(item) {
      this.$router.push(item);
      this.$emit("renew");
    },
    /*  查询是否超出  */
    searchRight() {
      let list = JSON.parse(window.sessionStorage.getItem("tabBlockList"));
      if (list.length >= 10) {
        this.disabled2 = false;
      } else {
        this.disabled2 = true;
      }
    },
  },
  mounted() {
    this.searchRight();
  },
};
</script>

<style lang="less" scoped>
/deep/.ant-tabs-bar {
  margin: 0 !important;
  margin-left: 0.625rem !important;
}

.tab-ul {
  display: flex;
  align-items: center;
  margin: 0 0.625rem 0.3125rem 0.625rem !important;
  position: relative;
  overflow: hidden;

  .tab-li {
    border-radius: 5px;
    cursor: pointer;
    flex: 0 0 8%;
    padding: 0.3125rem;
    background: #ffffff;
    margin-right: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;

    span {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .staus {
      display: inline-block;

      height: 100%;
      display: flex;
      justify-content: center;

      .box {
        display: inline-block;
        border-radius: 50%;
        height: 0.9375rem;
        width: 0.9375rem;
        background: #c0c4cc;
      }
    }

    .name {
      flex: 3;
    }

    .close {
      font-size: 0.9375rem;
    }
  }

  .tab-li:last-child {
    margin: 0;
  }
}

.activemenu {
  flex: 1;
  flex-shrink: 0;
  overflow: hidden;
  white-space: nowrap;
}

.active-menu-animated {
  position: relative;
  display: flex;
  box-sizing: border-box;
  margin: 0;
  padding: 0 0.625rem;
  list-style: none;
  transition: 0.3s ease-in-out;
}

.success-box {
  background: rgba(32, 180, 172, 0.7) !important;
  color: #ffffff;
}
</style>
